<template>
  <div class="header">
    <!-- 返回箭头 -->
    <div class="back" @click="goBack">
        <i class="iconfont">&#xe624;</i>
    </div>
    <!-- 搜索 -->
    <div class="search" @click="goSearch">
        <i class="iconfont">&#xe752;</i>
        <span>搜您喜欢的...</span>
    </div>
    <!-- 返回主页 -->
    <div class="backHome">
        <i  class="iconfont">&#xe603;</i>
    </div>
  </div>
</template>

<script>
export default {
    methods:{
        goSearch(){
            this.$router.push({
                name:'search-index'
            })
        },
        goBack(){
            this.$router.push({
                name:'home'
            })
        }
    }
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: (40 / @rootsize);
    background-color: #b0352f;
    color: #fff;
    z-index:999;
    .back{
        display: flex;
        align-items: center;
        padding:(5  / @rootsize) (10 / @rootsize);
        i{
            font-size: (20 / @rootsize);
        }
    }
    .search{
        display: flex;
        align-items: center;
        width: (260 / @rootsize);
        height: (28 / @rootsize);
        background-color: #fff;
        border-radius: 12px;
        i{
            padding: 0 (10 / @rootsize);
            color: #666;
        }
        span{
            padding:0 (10 / @rootsize);
            font-size: (12 / @rootsize);
            color: #666;
        }
    }
    .backHome{
        display: flex;
        align-items: center;
        padding:0 (16 / @rootsize);
        i{
            font-size: (20 / @rootsize);
        }
    }
}
</style>